/**
 *　VideoItem
 */

var React = require("react");
var CommonItem = require("./CommonItem");
var CommonMask = require("./CommonMask");
var CommonHeader = require("./CommonHeader");
var VideoItem = React.createClass({
    mixins: [CommonItem],
    getInitialState: function () {
        return {
            playing: false
        }
    },
    handleOnPlaying: function () {
        var playing = !this.state.playing;
        var video = $(this.refs.video)[0];

        if (playing) {
            video.play();
        } else {
            video.pause();
        }

        this.setState({
            playing: playing
        });
    },
    render: function () {
        const {type}=this;
        const {data, updateState}=this.props;
        const {playing}=this.props;
        const source = data.url || data.html;
        let video = "";
        if (source) {
            video =
                <div className="video-container">
                    <video ref="video" src={source} preload="metadata" className="video-js vjs-default-skin">
                        <source src={source}/>
                    </video>
                </div>
        }

        return (
            <div ref="container" className="details-item">
                <CommonMask type={type} play={this.handleOnPlaying} playing={playing} data={data}
                            updateState={updateState}/>
                <CommonHeader type={type}/>
                <div className="details-content">
                    { video }
                </div>
            </div>
        )
    }
});

module.exports = VideoItem;
